<template>
    <div class="salonDetail">
        <div class="header">
            <h1>{{headerData.anntitle}}</h1>
            <div class="header-date">举办日期：<span>{{headerData.holdDate}}</span></div>
            <div class="header-names">参会对象：<span>金融同业人员</span></div>
            <div class="header-number">
                <span>145人已报名</span>
                <span>线下活动</span>
            </div>
            <div class="header-address app-right-icon"><img src="../../assets/list-locate.svg">{{headerData.holdLocation}}</div>
        </div>
        <div class="box advertisement">
            <img src="../../assets/ad.jpg" />
            <div class="mark">广告</div>
        </div>
        <div class="box">
            <h2>活动简介</h2>
            <div>2017年，央行正式确立货币政策和宏观审慎政策的双支柱调控金融去杠杆成为监管政策持续完善的索求所在。为何要金融去杠杆？去杠杆的对象是谁？金融体系存在着怎样的风险集聚，导致监管机构下大决心实施金融去杠杆？政策完善的目的何在？有哪些影响？作为金融市场的参与者，我们应该如何看待和应对？让我们来一起学习和探讨。</div>
            <img src="../../assets/3.jpg" />
            <div>
                <p>央行正式确立货币政策和宏观审慎政策的双支柱调控金融去杠杆成为监管政策持续完善的索求所在。为何要金融去杠杆？</p>
                <p>去杠杆的对象是谁？金融体系存在着怎样的风险集聚，导致监管机构下大决心实施金融去杠杆？政策完善的目的何在？有哪些影响？作为金融市场的参与者，我们应该如何看待和应对？让我们来一起学习和探讨。</p>
                <p>优先/次级产品结构化分层：当期优先级的本金和预期收益均在次级之前分配，原始权益人自持次级资产支持证券。 担保人承担担保义务：担保人应承担的差额补足义务、优先04-07级资产支。</p>
            </div>
        </div>
        <div class="line">
            <span>往期回顾</span>
        </div>
        <ul class="list">
            <li class="list-item" v-for="(item, key) in dataList" :key="key">
                <div class="top">{{item.title}}</div>
                <div class="bottom">
                    <div class="left"><img src="../../assets/expert1.png" /></div>
                    <div class="right">
                        <div class="center mb12"><img src="../../assets/list-time.svg">{{item.date}}</div>
                        <div class="center"><img src="../../assets/list-locate.svg">{{item.address}}</div>
                        <div class="last">
                            <div class="center"><img src="../../assets/list-lecturer.svg">{{item.name}}</div>
                            <div class="btn"><img src="../../assets/list-success.svg"><span>{{item.state}}</span></div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="more">
            <span>查看更多</span>
        </div>
        <div class="footer">
            <div class="content">
                <div class="left">
                    <div>
                        <van-icon name="like-o" />
                        <span>收藏</span>
                    </div>
                    <div> 
                        <van-icon name="share" />
                        <span>分享</span>
                    </div>
                </div>
                <div class="right"><span v-on:click="handlesignUp()">报名</span></div>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
    @import '../../style/variable';
    .salonDetail {
        background-color: @color-bg-gray;
        .box {
            background-color: @color-white;
            margin-bottom: 0.8rem;
            padding: 1.5rem 1.5rem;
            font-size: 1.5rem;
            line-height: 2.1rem;
            color: #333E48;
            text-align: justify;
            h2 {
                font-size: 1.6rem;
                line-height: 2.3rem;
                margin-bottom: 0.9rem;
                font-weight: 600;
            }
            img {
                width: 100%;
            }
        }
        .header {
            background-color: @color-white;
            margin-bottom: 0.8rem;
            padding: 1.5rem 1.5rem 0;
            font-size: 1.5rem;
            line-height: 2.1rem;
            color: #333E48;
            text-align: justify;
            h1 {
                color: @color-black;
                font-size: 2.2rem;
                line-height: 2.9rem;
                margin-bottom: 1.1rem;
            }
            &-date, &-names {
                font-size: 1.4rem;
                line-height: 2rem;
                color: @color-black;
                margin-bottom: 0.7rem;
                span {
                    color: @color-block-red;
                }
            }
            &-number {
                display: flex;
                justify-content: space-between;
                color: #7A7A7A;
                font-size: 1.3rem;
                line-height: 1.9rem;
                margin: 0.5rem 0 1.3rem;
            }
            &-address {
                border-top: 1px solid #E5E5E5;
                color: #7A7A7A;
                font-size: 1.2rem;
                padding: 1.2rem 0 1.2rem;
                img {
                    vertical-align: middle;
                    margin-right: 0.7rem;
                }
            }
        }
        .advertisement {
            padding: 0.8rem;
            position: relative;
            img {
                width: 100%;
            }
            .mark {
                position: absolute;
                right: 1.2rem;
                bottom: 1.4rem;
                top: auto;
                padding: 0.2rem 0.9rem;
                line-height: 1.5rem;
                text-align: center;
                font-size: 1.2rem;
                color: @color-white;
                font-weight: 300;
                border-radius: .3rem;
                background: rgba(0,0,0,.2);
                text-shadow: none;
            }
        }
        .line {
            background-color: @color-white;
            color: #333E48;
            font-size: 1.6rem;
            text-align: center;
            padding: 1.4rem 0;
            border-bottom: 1px solid #C7C7C7;
            span {
                position: relative;
            }
            span:before {
                width: 3rem;
                height: 0.2rem;
                background-color: #D2D2D2;
                content: ' ';
                display: inline-block;
                position: absolute;
                top: 0.8rem;
                left: -3.5rem;
            }
            span:after {
                width: 3rem;
                height: 0.2rem;
                background-color: #D2D2D2;
                content: ' ';
                display: inline-block;
                position: absolute;
                top: 0.8rem;
                right: -3.5rem;
            }
        }
        .list {
            background-color: @color-white;
            padding-left: 1.5rem;
            &-item {
                border-bottom: 1px solid rgba(0,0,0,.1);
                padding: 1rem 0.7rem 1.9rem 0;
                display: flex;
                flex-direction: column;
                .top{
                    color: #333E48;
                    font-size: 1.5rem;
                    font-weight: 500;
                    margin-bottom: 1.3rem;
                }
                .bottom{
                    display: flex;
                    align-items: center;
                    .left {
                        width: 6.9rem;
                        height: 6.9rem;
                        margin-right: 1.1rem;
                        img {
                            height: 100%;
                        }
                    }
                    .right{
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        font-size: 1.3rem;
                        img {
                            height: 1.4rem;
                            margin-right: 0.7rem;
                        }
                        .last {
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            align-items: flex-end;
                            .btn {
                                display: flex;
                                align-items: center;
                                padding: 0.6rem;
                                border: 1px solid #949494;
                                border-radius: 0.3rem;
                                color: #7A7A7A;
                                img{
                                    margin-right: 0.5rem;
                                }
                            }
                        }
                        .center{
                            display: flex;
                            align-items: center;
                        }
                        .mb12 {
                            margin-bottom: 1.2rem;
                        }
                    }
                }
            }
        }
        .more {
            background-color: @color-white;
            text-align: center;
            padding: .8rem 0;
            span {
                font-size: 1.3rem;
                line-height: 1.9rem;
                color: #BB9048;
                padding: .9rem 1.9rem;
                border: 1px solid #BB9048;
                border-radius: 2.1rem;
                display: inline-block;
            }
        }
        .footer {
            background-color: @color-white;
            box-shadow: 0 0 3px rgba(239,239,244,.4);
            margin-top: 0.7rem;
            .content {
                padding: 1.1rem 1.8rem 1.1rem 0;
                display: flex;
                .left {
                    flex: 1;
                    border-right: 1px solid #E9E9E9;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    div:nth-of-type(1) {
                        flex: 1 1 auto;
                        display: flex;
                        flex-direction: column;
                    }
                    div:nth-of-type(2) {
                        flex: 1 1 auto;
                        display: flex;
                        flex-direction: column;
                    }
                }
                .right {
                    flex: 2;
                    padding-left: 1.8rem;
                    span {
                        display: block;
                        height: 3.8rem;
                        line-height: 3.8rem;
                        text-align: center;
                        color: @color-white;
                        background-color: #CEA052;
                        letter-spacing: 1rem;
                        font-size: 1.4rem;
                        border-radius: 0.3rem;
                    }
                }
            }
        }
    }
</style>
<script>
    import { Icon } from 'vant';
    import { think as API } from 'api';
    import T from 'utils/T';
    export default {
        components: {
            [Icon.name]: Icon,
        },
        data() {
            return {
                headerData: {},
                dataList: [
                    {
                        title: '大金所·大固收同业沙龙(第一期)——5月勇征小黄山同业徒步交流活动圆满结束',
                        name: '金融同业人员',
                        address: '四川·成都',
                        date: '2018.12.14-2018.12.16',
                        state: '报名中'
                    },
                    {
                        title: '大金所·大固收同业沙龙(第5期)—2月勇征梧桐山同业徒步交流活动欢迎您的参加',
                        name: '金融同业人员',
                        address: '海南·三亚',
                        date: '2018.12.14-2018.12.16',
                        state: '已落幕'
                    },
                    {
                        title: '大金所·大固收同业沙龙(第5期)—2月勇征梧桐山同业徒步交流活动欢迎您的参加',
                        name: '金融同业人员',
                        address: '海南·三亚',
                        date: '2018.12.14-2018.12.16',
                        state: '已落幕'
                    },
                ]
            }
        },
        methods: {
            handlesignUp() {
                let query = this.$route.query;
                this.$router.push({ 
                    path: '/think/join',
                    query: { 
                        relaId: query.id,
                        relaType: 4,
                        relaChildType: 2,
                        relaUser: 'uesrID'
                    }
                });
            },
            requestData(){
                let params = {
                    id: this.$route.query.id
                };
                this.$axios.get(API.THINK_TANK_DETAIL, { params }).then((result)=>{
                    let resultData = result.data;
                    this.headerData = {
                        anntitle: resultData.anntitle,
                        author: resultData.author,
                        holdLocation: resultData.holdLocation,
                        holdDate: `${T.formatDate(resultData.holdTime)}-${T.formatDate(resultData.holdTime)}`,
                    };
                    console.log('resultData', resultData);
                })
            },
        },
        created(){
            this.$store.commit('hideNav', true);
            this.requestData();
        }
    }
</script>